<!-- 店铺详情 -->
<template>
  <div class="shop-detail">
    <van-nav-bar fixed :title="title" safe-area-inset-top>
      <template #left>
        <img
          style="width: 30px; margin-right: 10px"
          src="../../assets/images/返回2.png"
          @click="() => $router.go(-1)"
          alt=""
        />
      </template>
    </van-nav-bar>
    <!-- 内容 -->
    <div class="bg">
      <div class="avatar">
        <img src="../../assets/images/mall/店铺头像.png" alt="" />
        <div class="right">
          <span>用户昵称</span>
          <div>张三 <span>正式版会员</span></div>
        </div>
      </div>
    </div>
    <div class="num">
      <van-grid :border="false">
        <van-grid-item icon="photo-o" text="浏览">
          <template #icon>
            <span class="sum">5612</span>
          </template>
        </van-grid-item>
        <van-grid-item icon="photo-o" text="信息">
          <template #icon>
            <span class="sum">5612</span>
          </template>
        </van-grid-item>
        <van-grid-item icon="photo-o" text="分享">
          <template #icon>
            <span class="sum">5612</span>
          </template>
        </van-grid-item>
        <van-grid-item icon="photo-o" text="关注">
          <template #icon>
            <span class="sum">5612</span>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="cell">
      <van-cell :title="content.title">
        <template #icon>
          <img :src="img[0]" alt="" />
        </template>
      </van-cell>
      <van-cell is-link>
        <template #title>
          <div class="photo">
            <img src="../../assets/images/mall/店铺图片3.png" alt="" />
            <img src="../../assets/images/mall/店铺图片3.png" alt="" />
            <img src="../../assets/images/mall/店铺图片3.png" alt="" />
          </div>
        </template>
        <template #icon>
          <img :src="img[1]" alt="" />
        </template>
      </van-cell>
      <van-cell :title="content.phone" is-link>
        <template #icon>
          <img :src="img[2]" alt="" />
        </template>
      </van-cell>
      <van-cell title="商家微信" is-link>
        <template #icon>
          <img :src="img[3]" alt="" />
        </template>
      </van-cell>
      <van-cell :title="content.address" is-link>
        <template #icon>
          <img :src="img[4]" alt="" />
        </template>
      </van-cell>
    </div>
    <div class="btn">
      <van-button type="info">拨打电话</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      title: "店铺名字店铺名字店铺名字店铺名字",
      content: {
        title: "海浪科技,成就梦想",
        phone: 18888888888,
        address: "地址",
      },
      img: [
        require("../../assets/images/我的--宣言.png"),
        require("../../assets/images/扫图.png"),
        require("../../assets/images/我的-联系 (1).png"),
        require("../../assets/images/我的-微信.png"),
        require("../../assets/images/我的-定位.png"),
      ],
    };
  },
  methods: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.shop-detail {
  width: 100%;
  padding-top: 92px;
  min-height: 100vh;
  background: rgba($color: #fff, $alpha: 0);
  .bg {
    padding-top: 30px;
    width: 100%;
    height: 300px;
    background-color: #3e96e8;
    border-radius: 0 0 35px 35px;
    .avatar {
      width: 90%;
      margin: 0 auto;
      display: flex;
      img {
        width: 120px;
        height: 120px;
        border: 1px solid #fff;
        border-radius: 50%;
        overflow: hidden;
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 30px;
        font-size: 30px;
        color: #fff;
        > :last-child span {
          font-size: 22px;
          color: rgb(236, 125, 127);
          margin-left: 10px;
        }
      }
    }
  }
  .btn{
    width: 100%;
    position: fixed;
    text-align: center;
    bottom: 5%;
  } .num {
    width: 90%;
    margin: -100px auto 0;
    background-color: #fff;
    border-radius: 25px;
    overflow: hidden;
    padding: 20px 30px;
    .sum {
      font-size: 50px;
      font-weight: bold;
      color: #3e96e8;
    }
  }
  .cell {
    margin-top: 20px;
    img {
      width: 50px;
      height: 50px;
      margin-right: 20px;
    }
  }
}
</style>